<template>
  <div class="blog-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-wrapper">
      <el-icon class="loading-icon" :size="50">
        <Loading />
      </el-icon>
      <span>正在加载精彩内容...</span>
    </div>

    <!-- 内容区域 -->
    <template v-else>
      <!-- 标题区 -->
      <div class="header-box">
        <h1 class="main-title">📖 旅行博客详情</h1>
        <h2 class="blog-title">
          <el-icon>
            <Reading />
          </el-icon>
          {{ Data.title || '未知标题' }}
        </h2>
        <div class="meta-info">
          <span class="time-info">
            <el-icon>
              <Clock />
            </el-icon>
            发布于 {{ formatTime(Data.createTime) }}
          </span>
          <el-tag type="info" v-if="Data.updateTime">
            <el-icon>
              <Refresh />
            </el-icon>
            更新于 {{ formatTime(Data.updateTime) }}
          </el-tag>
        </div>
      </div>

      <!-- 封面图 -->
      <div class="cover-wrapper" v-if="Data.coverImg">
        <el-image
          :src="Data.coverImg"
          fit="cover"
          class="cover-image"
          :preview-src-list="[Data.coverImg]"
        >
          <template #error>
            <div class="image-error">
              <el-icon>
                <Picture />
              </el-icon>
              <span>封面加载失败</span>
            </div>
          </template>
        </el-image>
      </div>

      <!-- 内容区 -->
      <article class="content-box" v-html="Data.content"></article>

      <!-- 数据统计 -->
      <div class="stat-box">
        <el-space :size="30">
          <span class="stat-item">
            <el-icon>
              <View />
            </el-icon>
            浏览 {{ Data.viewCount || 0 }}
          </span>
          <span class="stat-item" @click="handleLike">
            <el-icon>
              <Star />
            </el-icon>
           点赞 {{ Data.likeCount || 0 }}
          </span>
        </el-space>
      </div>
    </template>
  </div>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
  Clock,
  Reading,
  View,
  Star,
  Picture,
  Loading,
  Refresh
} from "@element-plus/icons-vue";
import { articleDetailService,articleLikeService } from "@/api/hostTen.js";

const route = useRoute();
const Data = ref({});
const loading = ref(true);

// 时间格式化
const formatTime = timeStr => {
  if (!timeStr) return "未知时间";
  return new Date(timeStr).toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit"
  });
};

onMounted(async () => {
  try {
    const id = route.params.id;
    const res = await articleDetailService(id);
    Data.value = res.data || {};
  } catch (error) {
    console.error("加载失败:", error);
    ElMessage.error("获取博客详情失败");
  } finally {
    loading.value = false;
  }
});

// 点赞逻辑
const handleLike = async () => {
  try {
    const id = route.params.id;
    await articleLikeService(id);
    Data.value.likeCount = (Data.value.likeCount || 0) + 1;
  } catch (error) {
    console.error("点赞失败:", error);
    ElMessage.error("点赞失败");
  }
};
</script>
  
  <style scoped>
.blog-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 30px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05);
}

.loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 100px 0;
  color: #2d4279;

  .loading-icon {
    animation: rotate 2s linear infinite;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.header-box {
  text-align: center;
  margin-bottom: 40px;

  .main-title {
    color: #2d4279;
    font-size: 2.2rem;
    margin-bottom: 15px;
  }

  .blog-title {
    color: #1a2b50;
    font-size: 1.8rem;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
}

.meta-info {
  display: flex;
  gap: 20px;
  justify-content: center;
  color: #909399;
  font-size: 0.95rem;

  .el-icon {
    margin-right: 5px;
  }
}

.cover-wrapper {
  margin: 30px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  .cover-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.02);
    }
  }

  .image-error {
    height: 200px;
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c0c4cc;

    .el-icon {
      font-size: 50px;
      margin-bottom: 10px;
    }
  }
}

.content-box {
  line-height: 1.8;
  font-size: 1.1rem;
  color: #606266;
  margin: 40px 0;

  :deep(p) {
    margin: 1.5em 0;
    text-indent: 2em;
  }

  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
}

.stat-box {
  border-top: 1px solid #ebeef5;
  padding-top: 30px;
  text-align: center;

  .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: #f8f9fc;
    border-radius: 20px;
    color: #606266;

    .el-icon {
      color: #2d4279;
    }
  }
}

@media (max-width: 768px) {
  .blog-container {
    padding: 20px;
    margin: 10px;
  }

  .main-title {
    font-size: 1.8rem !important;
  }

  .blog-title {
    font-size: 1.4rem !important;
  }

  .cover-image {
    height: 250px !important;
  }

  .content-box {
    font-size: 1rem;
  }
}
</style>